<template>
  <div class="layout">
    <el-container>
      <el-header class="header">
        <TopHeader v-if="mainHeaderVisible" />
        <GameHeader v-else />
      </el-header>
      <el-container>
        <el-aside style="width: auto" v-show="menuVisible">
          <AsideMenu />
        </el-aside>
        <el-main class="main-area">
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
    <div class="alert-wrapper" v-if="alertVisible">
<!--      <Alert-->
<!--        :title="alertConfig['title']"-->
<!--        :type="alertConfig['type']"-->
<!--        :effect="alertConfig['effect']"-->
<!--        @close="onAlertClose"-->
<!--      />-->
    </div>
  </div>
</template>
<script setup lang="ts">
import { RouterView } from "vue-router";

import TopHeader from "@cs/TopHeader/Main-Header.vue";
import Alert from "@cs/Feedback/Alert-Component.vue";
import { useAlert } from "@/libs/useAlert";
import { provide, ref, watch } from "vue";
import { oAlert, cAlert, MESSAGE_BOX_SYMBOL, NET_ERROR_TIPS } from "@/libs/useKeys";
import { ElMessage, ElMessageBox } from "element-plus";
// @ts-ignore
import pub from "vc-subscribe-publish";
import { useRouteAuth } from "@/libs/useRoute";
import AsideMenu from "@cs/Aside-Menu/Aside-Menu.vue";
import { useRoute } from "vue-router";
import { headerExcludePath, menuExcludePath } from "@/router/menu-exclude";

import GameHeader from "@cs/TopHeader/Game-Header/Game-Header";
import { useUserInfoStore } from "@/stores/user";
import { fetchSettingGet } from "@/http/setting";
import type { Http } from "@/interface/Http";
import { useI18n } from "vue-i18n";

useRouteAuth();
const i18n = useI18n();
const [onAlertOpen, onAlertClose, alertVisible, alertConfig] = useAlert();
provide(oAlert, onAlertOpen);
provide(cAlert, onAlertClose);

pub.subscribe(NET_ERROR_TIPS, (err: any) => {
  // onAlertOpen({
  //   title: i18n.t(err[0]),
  //   type: "error"
  // });
  ElMessage({
    message: i18n.t(err[0]),
    icon: "Warning", // 自定义图标
    type: "warning",
    duration: 3000,
    offset: 80
  });
});

const alertState = ref(false);
pub.subscribe(MESSAGE_BOX_SYMBOL, (message?: any) => {
  if (alertState.value) return;
  alertState.value = true;
  ElMessageBox.alert("", {
    confirmButtonText: "确定",
    title: "提示",
    message: message[0],
    showClose: false,
    autofocus: true,
    // center: true,
    lockScroll: true,
    callback() {
      alertState.value = false;
    }
  });
});
const userStore = useUserInfoStore();
const route = useRoute();
const menuVisible = ref(true);
const mainHeaderVisible = ref(true);


const getSetting = (userId:number)=> {
  fetchSettingGet({
    userId: userId
  }).then((res:Http.Response<any>)=> {
    if(res.code === 200){
      userStore.setUserInfo(
        Object.assign({}, userStore.userInfo, { setting: {languageCode: res.data.languageCode} })
      )
      i18n.locale.value = res.data.languageCode;
    }
  });
}
watch(
  () => route.fullPath,
  (newPath) => {
    menuVisible.value = !menuExcludePath.some((item) => newPath.replace("/", "").startsWith(item));
    mainHeaderVisible.value = !headerExcludePath.some((item)=> newPath.replace("/", "").startsWith(item));
  }
);
watch(()=> userStore?.userInfo?.user?.id, (cb)=>{
   if(cb){
     getSetting(cb)
   }
},{
  immediate: true
})


</script>
<style scoped lang="scss">
@import "./theme.scss";

.main-area {
  background-color: $main-area-bg;
  padding: 0;
}
.header {
  height: auto;
  box-shadow: 0 5px 10px -5px rgba(49, 23, 94,.6);
  margin-bottom: 3px;
}
.layout {
  padding: 0;
  margin: 0;
  overflow-y: hidden;
  height: 100vh;
  --el-input-focus-border: #553fc5;
  --el-input-focus-border-color: #553fc5;
  &:deep(.el-textarea) {
    --el-input-focus-border: #553fc5;
    --el-input-focus-border-color: #553fc5;
  }
  &:deep(.el-input__wrapper.is-focus) {
    box-shadow: $main-box-shadow-focus !important;
  }
  &:deep(.el-select-dropdown__item.selected) {
    color: $main-active-font-color !important;
  }
  &:deep(.el-select .el-input.is-focus .el-input__wrapper) {
    box-shadow: $main-box-shadow-focus !important;
  }
}

.alert-wrapper {
  position: fixed;
  left: 40vw;
  right: 40vw;
  top: 15vh;
  z-index: 99999;
  min-width: 280px;
}
</style>
